:root {
  --t-dg-hover: #f0f2f5;
  --t-dg-fixed-bg: #fff;
  --t-dg-even-bg: #f7f8fb;
  // --t-dg-th-bg: #fafafa;
  --t-dg-th-bg: #f2f3f8;
  --t-dg-th-border-color: #d9d9d9;
  --t-fixed-box-shadow-width: 8px;
  --t-scroll-padding-left: 0;
  --t-left-fixed-left: 0;
  // --t-fixed-header-offset-top:0px;
}

.t-demo {
}

@mixin column-shadow{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--t-fixed-box-shadow-width);
  background: linear-gradient(to right, transparent, #e2e2e2);
}

@mixin fixed-column-left-shadow{
  padding-right: 8px !important;
  // border-right-width: 0px !important;
  &::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% - var(--t-fixed-box-shadow-width));
    width: var(--t-fixed-box-shadow-left-width, var(--t-fixed-box-shadow-width));
    background: linear-gradient(to left, transparent, #e2e2e2);
    border-right-width: 0;
  }
}

.t-datagrid-container{
  position: relative;

  // .q-table__middle.q-virtual-scroll{
  //   padding-left: var(--t-scroll-padding-left, 0);
  // }

  .simplePaging {
    .q-pagination__content {
      & > button:first-child, & > button:last-child{
        display: none;
      }
    }

    input.q-field__native::placeholder{
      color: rgba(0,0,0,0.56) !important;
    }
  }

  &:hover .t-fixed-header{
    &.has-scrollbar .scroll{
      margin-right: 7px;
    }
  }

  .t-fixed-header{
    position: fixed;
    top: var(--t-fixed-header-offset-top, 0px);
    padding: var(--t-fixed-header-padding, unset);
    padding-top: var(--t-fixed-header-padding-top, 0px);
    background-color: var(--t-fixed-header-bg-color, "#FFF");
    z-index: var(--t-fixed-header-zindex, 190);

    &.has-scrollbar .scroll{
      margin-right: 8px;
    }

    .t-data-grid{
      max-height: 48px;
      &.auto-filter-row{
        max-height: 96px;
      }

      .scroll{
        overflow: hidden;
        thead{
          tr{
            th{
              div.selectionBox{
                // 隐藏浮动表头上的全选复选框
                visibility: hidden;
              }
            }
          }
        }
        tbody{
          tr{
            visibility: hidden;
            &.columnsFilter{
              visibility:unset;
            }
          }
        }
      }
    }
  }

  .no-x-scrollbar{
    .fixed-column-right-shadow{
      &::before{
        display: none;
      }
    }
  }
}

.t-data-grid {

  .selectionBox{
    text-align: center;
  }

  .columnsFilter .tr-select-big .q-field--focused .q-field__inner .q-field__control{
    border: 1px solid var(--t-color);
    box-shadow: 0 0 3px rgba(var(--t-color-rgb), 0.6);
  }

  .select-tabindex .q-field--highlighted{
    border: 1px solid var(--t-color);
    box-shadow: 0 0 3px rgba(var(--t-color-rgb), 0.6);
  }

  .q-table__bottom.row {
    color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
    .q-table__bottom-item,
    .q-field__native.row.items-center
      {
        color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
      }
  }

  .q-checkbox--dense .q-checkbox__bg {
    width: 14px;
    height: 14px;
    left: 15%;
    top: 15%;
  }

  .q-table th,
  .q-table tbody th,
  .q-table tbody td {
    font-size: 14px;
    color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理透明度,将80%替换为--t-color-opacity*/0.8));

    padding-left: 12px;
    padding-right: 12px;
  }

  .q-table tbody td{
    &:before, &:after{
      background-color: transparent;
    }
  }

  .q-table thead tr th {
    background-color: var(--t-dg-th-bg);
    color: rgba(0, 0, 0, 0.56);
  }

  .q-table tbody tr:hover {
    // background-color: var(--t-color-hover) !important;
    background-color: var(--t-dg-hover) !important;
  }
  .q-table__bottom {
    font-size: 14px;

    &.row.items-center.justify-end{
      margin-right: 8px;
      padding-right: 6px;
    }
  }

  .q-table thead,
  .q-table tr,
  .q-table th,
  .q-table td {
    // border-color: var(--t-dg-th-bg);
    // border-color: rgba(241, 241, 241, 1);
    border-color: #f1f1f1;

    &:not(.q-table--col-auto-width) {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .q-table tr th {
    font-weight: 600;
    font-size: 12px;
    color: rgb(0, 0, 0, 0.8);
    background-color: var(--t-dg-th-bg) !important;
  }

  .q-table tr:nth-child(even) td {
    background-color: var(--t-dg-even-bg) !important;
  }

  .q-table tr:nth-child(even):hover td {
    background-color: var(--t-dg-hover) !important;
  }

  .q-table tr:nth-child(even) td {
    &.fixed-column-left-shadow {
      &::after{
        background: linear-gradient(to left, var(--t-dg-even-bg, #fff), #e2e2e2) !important;
      }
    }
  }
  .q-table tr:nth-child(odd) td {
    &.fixed-column-left-shadow {
      &::after{
        background: linear-gradient(to left,  #fff, #e2e2e2) !important;
      }
    }
  }

  .q-table tr:nth-child(odd):hover td,
  .q-table tr:nth-child(even):hover td {
    &.fixed-column-left-shadow {
      &::after{
        background: linear-gradient(to left, var(--t-dg-hover, #fff), #e2e2e2) !important;
      }
    }
  }

  // .q-table tr:nth-child(even) {
  //   background-color: var(--t-dg-even-bg);
  //   td{
  //     background-color: var(--t-dg-even-bg) !important;
  //   }
  //   &:hover {
  //     background-color: var(--t-dg-hover);
  //     td{
  //       background-color: var(--t-dg-hover) !important;
  //     }
  //   }
  // }

  // .q-table tr:nth-child(even) td{
  //   background-color: var(--t-dg-even-bg) !important;
  //   &:hover {
  //     background-color: var(--t-dg-hover);
  //   }
  // }

  // .q-table tr:nth-child(even):hover td{
  //   background-color: var(--t-dg-even-bg) !important;
  // }

  .td-cmdColumn{
    button.q-btn{
      font-size: 12px;
    }
  }

  .white-space-wrap{
    white-space: wrap !important;
  }

  &.white-space-wrap .q-table td{
    white-space: wrap !important;
  }

  &.allowColumnResizing .q-table td {
    width: 0px;
    max-width: 0px;
  }

  &.enableSelection .q-table td.q-table--col-auto-width:first-child{
    width: unset;
    max-width: unset;
  }

  .q-table thead tr th{
    /* 应领导要求去掉表头的底线 2025-01-08 */
    border-bottom-width: 0px;
  }

  .q-table thead tr:last-child th {
    // border-color: var(--t-dg-th-bg);
    // border-color: rgba(241, 241, 241, 1);
    // border-color: var(--t-dg-th-border-color);
    border-left-color: transparent;
    border-right-color: transparent;
    border-left-width: 1px;
    border-right-width: 1px;

   &:hover{
    border-color: var(--t-dg-th-border-color);
    border-bottom-color: rgb(241, 241, 241);
   }
  }

  .q-table th.fixed-column-left,
  .q-table td.fixed-column-left {
    background-color: var(--t-dg-fixed-bg);
    position: sticky;
    left: 0;
    // left: var(--t-left-fixed-left, 0);
    z-index: 99;
    border-bottom-width: 1px;

    &.selectionCol{
      width: 45px;
      min-width: 45px;
      max-width: 45px;
    }
  }

  .q-table th.fixed-column-left {
    background-color: var(--t-dg-th-bg);
    border-bottom-width: 0px;
    z-index: 115 !important;
  }

  .q-virtual-scroll__content tr.selected {
    background-color: var(--t-color-selected);
    td{
      background-color: var(--t-color-selected) !important;
    }
  }

  .q-virtual-scroll__content tr:last-child td {
    border-bottom-width: 1px;
    // border-bottom-color: var(--t-dg-th-border-color);
  }

  .q-virtual-scroll__content tr td.fixed-column-left,
  .q-virtual-scroll__content tr td.sticky.right,
  .q-virtual-scroll__content tr td:first-child {
    background-color: var(--t-dg-fixed-bg);
    &:hover {
      background-color: var(--t-dg-hover);
    }
  }

  .q-virtual-scroll__content tr.selected td.fixed-column-left,
  .q-virtual-scroll__content tr.selected td.sticky.right,
  .q-virtual-scroll__content tr.selected td:first-child {
    /* 奇数行样式 */
    // background-color: rgba(var(--t-color-rgb), 0);
    background-color: var(--t-color-selected);
    &:hover {
      background-color: var(--t-dg-hover);
    }
  }

  .q-virtual-scroll__content tr:hover td.fixed-column-left,
  .q-virtual-scroll__content tr:hover td.sticky.right,
  .q-virtual-scroll__content tr:hover td:first-child {
    z-index: 105 !important;
    background-color: var(--t-dg-hover);
  }

  // .q-table th {
  //   z-index: 99;
  // }
  .q-table th.fixed-column-right,
  .q-table td.fixed-column-right {
    // background-color: #00b4ff;
    background-color: var(--t-dg-fixed-bg);
    // background-color: inherit;
    position: sticky;
    right: 0;
    z-index: 99;
  }

  &.selection .q-table th:first-child,
  &.selection .q-table td:first-child {
    background-color: var(--t-dg-fixed-bg);
    // background-color: inherit;
    position: sticky;
    left: 0;
    // left: var(--t-left-fixed-left, 0);
    z-index: 99;

    min-width: 50px;
    white-space: initial;
    overflow: initial;
    text-overflow: initial;
  }

  &.selection .q-table td.checkbox-filter {
    border-bottom-width: 1px;
    z-index: 110;
  }

  &.selection .q-table th:first-child {
    z-index: 115 !important;
    background-color: var(--t-dg-th-bg);
  }

  th.fixed-column-left-shadow {
    border-right-width: 0px !important;
    &:hover {
      border-right-width: var(--t-fixed-box-shadow-left-border-right-width, 1px) !important;
    }
  }

  .fixed-column-left-shadow {
    @include fixed-column-left-shadow;
  }

  .fixed-column-right-shadow {
    border-left: none;
    &::before{
      @include column-shadow;
    }
  }

  tbody tr.columnsFilter td {
    top: var(--t-columnsFilter-top, 48px);

    &.fixed-column-left{
      z-index: 115!important;
    }

    &.fixed-column-left-shadow {
      @include fixed-column-left-shadow;
    }
  }

  /* this is when the loading indicator appears */
  &.q-table--loading thead tr:last-child th {
    /* height of all previous header rows */
    // top: 48px; /*注释掉是因为loading时 表头下移了*/
  }

  /* prevent scrolling behind sticky top row on focus */
  tbody {
    /* height of all previous header rows */
    scroll-margin-top: 48px;
  }

  .cmdColumn_btngroup {
    .t-button {
      min-width: auto;
      padding-left: 0px !important;
      padding-right: 0px !important;
    }

    .q-btn-dropdown {
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
  }

  &.scrollbar-hover-visible {
    .q-virtual-scroll{
      scrollbar-width: none; /* For Firefox */
      -ms-overflow-style: none; /* For Internet Explorer and Edge */
      &::-webkit-scrollbar {
        // width: 4px;
        // height: 4px;
        background-color: transparent;

        // &:hover {
        //   width: 8px;
        //   height: 8px;
        // }
      }

      &::-webkit-scrollbar-thumb {
        background: #D9D9D9;
      }
      &::-webkit-scrollbar-thumb:hover {
        background: #D9D9D9;
      }

      &:hover {
        scrollbar-width: auto; /* For Firefox */
        -ms-overflow-style: auto; /* For Internet Explorer and Edge */
        &::-webkit-scrollbar {
          width: 8px;
          height: 8px;
          background-color: transparent;

          &:hover {
            &:horizontal {
              height: 8px;
              background-color: transparent;
            }

            &:vertical {
              width: 8px;
              background-color: transparent;
            }
          }
        }
      }

      &.has-scrollbar{
        padding-right: 8px;
        &::before{
            content:"";
            right:0;
            position: absolute;
            height:100%;
            width:8px;
            background-color: white;
            z-index:111;
        }

        &:hover {
          &::before{
            display: none;
          }
          padding-right: 0px;
          .stickyCol {
            th.sticky.right,
            td.sticky.right {
              right: 0px;
            }
          }
        }
      }
    }

    &.dynamic-height{
      .q-virtual-scroll{
          padding-bottom: 9px;
          margin-bottom: 1px;

          &::-webkit-scrollbar {
            display:none;
          }

          &.has-x-scrollbar:hover {
            padding-bottom: 1px;
          }

          &:hover {

            &::-webkit-scrollbar {
              display:initial;
            }
          }
        }
      }
      .q-table__bottom.row.items-center.justify-end{
        border-top-color: transparent;
      }
    }

    .q-tr.t-datagrid-mulit-header{
      // --mulit-header-border: 1px solid white;
      --mulit-header-border: 1px solid var(--t-dg-th-border-color);

      th{
        border:var(--mulit-header-border);
        border-left: none;
        border-top: none;
      }

      th.mulit-header-field,
      th.mulit-header_row-number,
      &.last-child th.mulit-header-field{
        border:var(--mulit-header-border);
        border-left: none;
        border-top: none;
      }

      th.mulit-header_row-number{
        border-left: none;
        border-top: none;
        border-right-width: 1px !important;
      }

      .right.mulit-header_cmd{
        border-right: none;
        border-left: none;
        border-top: none;
      }

      // .mulit-header-field{
      //   position:unset !important;

      //   &.sticky{
      //     top: var(--t-header-sticky-top, 0px);
      //     position:sticky !important;
      //     z-index: 110 !important;
      //   }
      // }

      .mulit-header-span, .mulit-header-field{
        border-bottom:var(--mulit-header-border);

        &.sticky{
          top: var(--t-header-sticky-top, 0px);
          position:sticky !important;
          z-index: 110 !important;

          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &.last{
          border-right: var(--mulit-header-border);
        }
      }

      .mulit-header_checkbox,
      .mulit-header_row-number{
        z-index: 116 !important;
        &:first-child{
          z-index: 116 !important;
        }
        border-right: var(--mulit-header-border);
      }

      // .row-number.fixed-column-left.fixed-column-left-shadow,
      .mulit-header_row-number.fixed-column-left.fixed-column-left-shadow{
        padding-right: 22px !important;

        &.left50px{
          left: 50px !important;
        }
      }

      .mulit-header_cmd{
        z-index: 111 !important;
      }
    }

    .header-row-number.fixed-column-left.fixed-column-left-shadow.left50px,
    .row-number.fixed-column-left.fixed-column-left-shadow.left50px{
      left: 50px !important;
    }
  }

.grouping-filter-container{
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 7px;

  .grouping-filter-title{
    color: rgba(0, 0, 0, 0.56);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 7px;
    margin-right: 9px;
    align-self: flex-start;
    height: 24px;
    line-height: 24px;

    .grouping-filter-title-container{
      text-wrap: nowrap;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      column-gap: 7px;

      .grouping-filter-field{
        border-bottom: 1px solid #d9d9d9;
        padding: 0 5px;
        cursor: pointer;
      }
    }
  }
}

.grouping-filter-field-selectPopup{
  overflow: hidden;
  height:32px;

  div.q-field__control-container.col.relative-position.row.no-wrap.q-anchor--skip > div.q-field__native{
    min-height: 32px;
  }
}

.t-datagrid-container-dev {
  .scroll{
    overflow: hidden;
    padding-bottom: 0px !important;
  }

  .q-table th.fixed-column-left {
    border-bottom-width: 0px;
  }

  .q-table th.sticky.right {
    z-index: 110;
  }
}

.mobile {

  .t-data-grid{
    &.selection .q-table th:first-child,
    &.selection .q-table td:first-child  {
      left: var(--t-left-fixed-left, 0);
    }
  }

  .t-datagrid-container{
    td.q-td.fixed-column-left{
      width: 0px;
      max-width: 180px;
      white-space: initial;
    }

    .table__bottom_marginTop10{
      margin-top: 10px;
      margin-right: 12px;
    }

    th, td{
      &.right.sticky{
        position: unset;
      }
    }

    .fixed-column-right-shadow::before{
      display: none;
    }

    .q-table__middle.q-virtual-scroll{
      padding-left: var(--t-scroll-padding-left, 0);
    }

    .q-table th.fixed-column-left,
    .q-table td.fixed-column-left {
      left: var(--t-left-fixed-left, 0);
    }
  }
}
